<template>
	<modal ref="reset" title="修改手机号码">
		<view class="inputRow">
			<text class="invokeLable">手机号码</text>
			<view class="inputContain">
				<input type="number" @input='inputBlur' data-name="phone" :value="phone" placeholder="请输入您的手机号码" />
			</view>

			<view class="sendcode" style="font-size:16rpx" @click="sendValide">发送验证码</view>

		</view>
		<view class="inputRow">
			<text class="invokeLable">验证码</text>
			<view class="invokeInput">
				<input @input="inputBlur" data-name="code" placeholder="请输入验证码" :value="code" />
			</view>
		</view>
		<view class="botBtn">
			<view class="cancle" @click="cancle">
				取消
			</view>
			<view class="confirm" @click="commit">
				提交
			</view>
		</view>
	</modal>
</template>

<script>
	import modal from "@/components/myModal/myModal.vue"
	import {
		sendValidaCode
	} from '@/common/loadUserInfo.js'
	export default {
		components: {
			modal
		},
		data() {
			return {
				phone: '',
				code: ''
			};
		},
		methods: {
			cancle() {
				this.$refs.reset.close()
			},
			open() {
				this.$refs.reset.open()
			},
			commit() {
				if (!this.phone || !this.code) {
					this.$api.msg('信息缺失！')
					return
				}
				let that = this
				that.$Request.request('/api/user_center/resetPhone', 'POST', {
					code: that.code,
					newPhone: that.phone
				}).then(res => {
					if(res.status == 1){
						that.$api.msg('修改手机号码成功！')
						setTimeout(() => {
							that.$refs.reset.close()
							uni.clearStorageSync()
							uni.navigateTo({
								url:'/pages/public/login'
							})
						}, 800)
					}
					
				}).catch(err => {
					console.log(err)
				})
			},
			//发送验证码
			sendValide() {
				let phoneReg = /^1[3456789]\d{9}$/
				console.log(this.phone)
				if (!phoneReg.test(this.phone)) {
					this.$api.msg('手机号码输入错误！')
					return
				}
				let that = this
				sendValidaCode({
					data: {
						phone: that.phone
					},
					success: (res) => {
						that.$api.msg('验证码发送成功！')
					}

				})
			},
			// 表单验证stpOne
			inputBlur(e) {
				let key = e.currentTarget.dataset.name;
				this[key] = e.detail.value
			},
		}
	}
</script>

<style lang="scss">
	.botBtn {
		margin: 110rpx auto 80rpx auto;
		height: 80rpx;
		width: 660rpx;
		border-radius: 40rpx;
		color: #fff;
		display: flex;
		overflow: hidden;

		view {
			@include textCenter(80rpx);
			width: 50%;
			letter-spacing: 0.2em;
		}

		.cancle {
			background-color: $themColor;
		}

		.confirm {
			background-color: #fa436a;
		}

	}

	.inputRow {
		padding: 30rpx 46rpx;
		@extend %flexBetw;
		font-size: 26rpx;

		.invokeLable {
			width: 150rpx;
		}

		.invokeInput {
			width: 500rpx;
			height: 50rpx;
			background-color: #f8f8f8;
			border-radius: 8rpx;
			@extend %flexVcenter;
		}

		.inputContain {
			width: 400rpx;
			height: 50rpx;
			background-color: #f8f8f8;
			border-radius: 8rpx;
			@extend %flexVcenter;
		}

		.sendcode {
			background-color: #f8f8f8;
			padding: 10rpx 10rpx;
		}

		.countDown {
			width: 180rpx;
			text-align: center;
			font-size: 22rpx;


		}


	}
</style>
